<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div class="left_box">
      <div class="code_box">
        <v-md-editor v-model="text" :toolbar="toolbar"></v-md-editor>
      </div>
    </div>
    <div id="load4490_box">
      <div class="popup_box">
        <div class="inner_content_common">
          <el-button type="primary" @click="drawDigAra()" size="small">绘制开挖区域</el-button>
          <el-button type="primary" @click="startAnalysis()" size="small">开挖分析</el-button>
          <el-button type="primary" @click="removeAnalysis()" size="small">移除分析</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {loadTdtLayer,loadModelLayer} from "@/widgets/modelExample_cesium/common/loadLayers";
import  TerrainClipPlan from "@/widgets/modelExample_cesium/common/analysis/digTerrianAnalysis/TerrainClipPlan"
// import  TerrainClipPlan from "@/widgets/modelExample_cesium/common/analysis/digTerrianAnalysis/TerrainClipPlan2"
import drawPolygon from "@/widgets/modelExample_cesium/common/Draw/Polygon";
import bottomPng from "@/assets/img/dig_terrian_img/bottom.jpg"
import wallPng from "@/assets/img/dig_terrian_img/wall.jpg"
import {onMounted, ref} from "vue";
const cViewer = ref();
let polygon: any = null;
let terrainClipPlan:any=null;
const text = ref(`
//-------------------------------开挖分析类（TerrainClipPlan）---------------------------

//-----------------------------------------类调用-------------------------------------

    `)
//修改天地图
const toolbar = ref({})
onMounted(() => {
  cViewer.value = initMap("load4490_box")
  // loadTdtLayer(cViewer.value, 'c', false);


  terrainClipPlan = new TerrainClipPlan(cViewer.value,{
    height: 100,//开挖深度 100 米
    splitNum: 1000,
    bottomImg:bottomPng,
    wallImg:wallPng,
    positions:[]
  })

  // terrainClipPlan = new TerrainClipPlan(cViewer.value, {
  //   height: 20,
  //   splitNum: 1000,
  //   bottomImg: bottomPng,
  //   wallImg:wallPng,
  // })

})
/**
 * 绘制开挖区域
 */
const drawDigAra=()=>{
  let xoffset= document.body.clientWidth*0.4;
  polygon= new  drawPolygon(cViewer.value);
  polygon.startDraw(false,{popOffset:{x:xoffset,y:72}})
}
//开始分析
const startAnalysis = () => {
  if(polygon.drawedPositions.length>0){//因为绘制可能会连续绘制，所以结果点位是个数组的集合[[],[]]
    terrainClipPlan.updateData(polygon.drawedPositions[0]);
    // terrainClipPlan.updateTerrainClipData(
    //     polygon.drawedPositions[0]
    // )
    if(polygon){
      polygon.clearDrawGraphic();
    }
  }
}
//移除分析
const removeAnalysis = () => {
  if(terrainClipPlan){
    terrainClipPlan.clear();
  }


}
</script>

<style lang="scss" scoped>
.left_box {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;

  .code_box {
    margin: 10px;
    width: calc(100% - 220px);
    height: calc(100% - 20px);
    //border:1px solid #00ff00;
    background-color: #ffffff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 120px);
  width: 200px;
  top: 100px;
  height: 60px;
  z-index: 10;
}

.inner_content_common {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  width: 50%;
}
</style>
